/**
* @author: LiYaHui
* @date: 2021-11-01
* @description: 预警项
*/
<template>
  <div class="default-wrap">
    <div class="content-title">
      <TitleCard title="总预警项数" :count="statistics.one"/>
      <TitleCard title="危险预警项数" :count="statistics.two"/>
      <TitleCard title="违规预警项数" :count="statistics.three"/>
      <TitleCard title="普通预警项数" :count="statistics.four"/>
    </div>
    <div class="content-search">
      <div class="search-select">
        <Select v-model="search.alarmTypeID" clearable placeholder="预警类型">
          <Option v-for="item in alarmTypeList" :value="item.id" :key="item.id">{{ item.alarmTypeName }}</Option>
        </Select>
        <Select v-model="search.algoTypeID" clearable placeholder="预警项">
          <Option v-for="item in algorithmType" :value="item.id" :key="item.id">{{ item.algorithmName }}</Option>
        </Select>
        <Select v-model="search.alarmLevelID" clearable placeholder="安全等级">
          <Option v-for="item in alarmLevelList" :value="item.id" :key="item.id">{{ item.alarmLevelName }}</Option>
        </Select>
        <Select v-model="search.isAvality" clearable placeholder="状态">
          <Option v-for="item in alarmStateDef" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <i class="search-icon" @click="handleSearch"></i>
      </div>

    </div>

    <div class="content-table">
      <Table max-height="600" border :columns="columns" :data="tableData"></Table>
    </div>
    <div class="content-page">
      <div class="page-btn">
        <Button type="primary" :loading="exportLoading" @click="handleDown">数据导出</Button>
      </div>
      <Page :total="total" :page-size="pageSize" :current="pageIndex" @on-change="onChange" show-elevator></Page>
    </div>

  </div>
</template>

<script type="text/jsx">
import TitleCard from '../components/TitleCard'
import page from '../mixins/page'
import * as api from '@/api/alarm'
import excel from '@/libs/excel'
export default {
  name: 'alarmItem',
  mixins: [page],
  components: {
    TitleCard
  },
  data () {
    let that = this
    return {
      search: {},
      list: [],

      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: '预警类型',
          key: 'alarmTypeName',
          align: 'center'
        },
        {
          title: '预警项',
          key: 'algorithmName',
          align: 'center'
        },
        {
          title: '安全等级',
          key: 'alarmLevelName',
          align: 'center'
        },
        {
          title: '状态',
          key: 'isAvality',
          align: 'center',
          render (c, { row }) {
            return <span>{ row.isAvality === true ? '有效' : '无效' }</span>
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          align: 'center',
          render (c, { row, column, index }) {
            return (
              <div class="table-button-wrap">
                <span onClick={ () => that.handleEdit(row) } class="table-btn">修改</span>
              </div>
            )
          }
        }
      ],
      tableData: [],
      alarmLevelList: [],
      alarmTypeList: [],
      showDetail: false,
      statistics: {},
      algorithmType: [],
      alarmStateDef: [
        { label: '有效', value: 1 },
        { label: '无效', value: 2 }
      ],
      exportLoading: false
    }
  },
  created () {
    // 获取预警统计
    let startDate = new Date().getFullYear() + '-01-01 00:00:00'
    let stopDate = new Date().getFullYear() + '-12-31 23:59:59'
    let params = {
      st: 7,
      startDate,
      stopDate
    }
    api.getStatistics(params).then(response => {
      this.statistics = response.data
    })

    // 获取预警等级
    api.getAlarmLevel().then(response => {
      this.alarmLevelList = response.data
    })

    // 获取预警类型
    api.getAlarmType().then(response => {
      this.alarmTypeList = response.data
    })

    // 获取所有预警项
    api.getAll().then(response => {
      this.algorithmType = response.data
    })

    this.init()
  },
  methods: {

    // 获取表格数据
    init () {
      let params = {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }
      for (let key in this.search) {
        if (this.search[key]) {
          params[key] = this.search[key]
        }
      }
      api.getPageAlgo(params).then(response => {
        this.tableData = response.data.algorithms.map(item => {
          item.alarmTypeName = item.alarmType.alarmTypeName
          item.typeName = item.algorithmType.typeName
          item.alarmLevelName = item.alarmLevel.alarmLevelName
          item.isAvality = item.isAvality
          item.id = item.id
          return item
        })
        this.total = response.data.allCount
      })
    },
    onChange (value) {
      this.pageIndex = value
      this.init()
    },
    handleEdit (row) {
      let isAvality = row.isAvality !== true
      api.ChangeAvality({ algoID: row.id, isAvality }).then(response => {
        this.init()
      })
    },
    // 数据导出
    handleDown () {
      this.exportLoading = true
      let options = {}
      for (let key in this.search) {
        if (this.search[key]) {
          options[key] = this.search[key]
        }
      }
      api.getAlgos(options).then(response => {
        let list = response.data.map(item => {
          item.alarmTypeName = item.alarmType.alarmTypeName
          item.typeName = item.algorithmType.typeName
          item.alarmLevelName = item.alarmLevel.alarmLevelName
          item.isAvality = item.isAvality === true ? '有效' : '无效'
          item.id = item.id
          return item
        })

        if (list.length) {
          const params = {
            title: ['预警类型', '预警项', '安全等级', '状态'],
            key: ['alarmTypeName', 'typeName', 'alarmLevelName', 'isAvality'],
            data: list,
            autoWidth: true,
            filename: `预警项_${Date.now()}`
          }
          excel.export_array_to_excel(params)
          this.exportLoading = false
        } else {
          this.$Message.info('暂无数据！')
          this.exportLoading = false
        }
      }).finally(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../styles/index.less";
</style>
